import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import dayjs from 'dayjs'
import { View, Image } from '@tarojs/components'
import { staticUrl } from '@/utils'
// import { prevRoute } from '@/utils/global'
import { staffQRcode } from '@/api/topush'
import './index.scss'

interface State{
    info: any
    msg: any
}

export default class Index extends Component {
    $instance = getCurrentInstance();

    constructor () {
        super(...arguments)
        this.state = {
            info: null,
            msg: null
        }
    }

    state: State

    UNSAFE_componentWillMount() { }
    componentDidMount() {
        const msg = JSON.parse(this.$instance.router.params.msg)
        staffQRcode({
            staffCode: msg.staffCode,
            storeCode: msg.storeCode
        }).then(res => {
            const data = res.data.data
            // const serverTime = new Date(res.header.Date).getTime()
            // console.log(serverTime, data.endAt * 1000)
            this.setState({
                info: data,
                msg
            })
        })
    }

    UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
    componentWillUnmount() { }
    componentDidShow() { }
    componentDidHide() { }
    componentDidCatchError() { }
    componentDidNotFound() { }
    tabStore() {
        Taro.redirectTo({
            url: '/pages/topush/index/index?isTab=true'
        })
    }
    render() {
        const { info, msg } = this.state
        return info && (
            <View className='topush-qrcode'>
                <Image className='bg-pic' mode='widthFix' src={staticUrl('/img/topush/bg.png')}></Image>
                <View className='main-qrcode'>
                    <View className='vendorname'>{info.vendorName}</View>
                    <View className='store-wrap'>
                        <View className='storename'>{info.storeName}({msg.staffName})</View>
                        <View className='tab-storename' onClick={() => this.tabStore()}>切换</View>
                    </View>
                    <View className='qrcode'>
                        <Image className='qrcode-pic' src={info.image}></Image>
                    </View>
                    <Image className='pic-1' src={staticUrl('/img/topush/logo-plugin.png')}></Image>
                    <View className='tips-wrap'>
                        <View className='title'>更多养车福利请扫二维码查看！</View>
                        <View className='sub-title'>30天内有效（{dayjs.unix(info.endAt).format('YYYY-MM-DD')}失效）</View>
                    </View>
                </View>
            </View>
        )
    }
}
